//文章编辑
import { PureComponent } from 'react'
import { connect } from 'react-redux';
import * as action from '../../actions/article'
// import {Link} from 'react-router-dom'
import Errors from '../../components/Errors'


class ArticleEdit extends PureComponent {

    constructor(props) {
        super(props)
        this.state = {
            slug: props.match.params.slug//初始化
        }
    }
    componentDidMount() {
        const slug = this.props.match.params.slug
        //获取文章详情数据
        this.props.getArticleBySlug(slug)
    }
    changeTitle = (ev) => {
        console.log('changeTitle');
        this.props.changeTitle('title', ev.target.value)
    }

    changeDesc = ev => {
        this.props.changeDesc('description', ev.target.value)
    }

    changeBody = ev => {
        this.props.changeBody('body', ev.target.value)
    }

    changeTag = ev => {
        this.props.changeTag('tag', ev.target.value)
    }



    watchEnter = ev => {
        if (ev.keyCode === 13) { //enter键
            console.log(ev.keyCode)
            ev.preventDefault()
            this.props.addTag()

        }
    }


    removeTag = tag => ev => this.props.removeTag(tag)


    //state 是在组件里
    onSubmitForm = (artcile) => (ev) => {
        ev.preventDefault()
        //网络接口请求 ： 注册
        this.props.upDataAtricle(artcile)
    }

    render() {
        const { slug, title, description, body, tag, tags, errors } = this.props
        return (
            <div className='editor-page'>
                <div className='container page'>
                    <div className='row'>
                        <div className='col-md-10 offset-md-1 col-xs-12'>
                            <h1>修改文章</h1>
                            {/* 错误信息 */}
                            <Errors errors={errors} />
                            {/* 编辑文章 */}
                            <form>
                                <fieldset className='form-group'>
                                    <input
                                        className='form-control form-control-lg'
                                        type="text"
                                        placeholder='文章标题'
                                        value={title || ""}
                                        onChange={this.changeTitle}
                                    />
                                </fieldset>
                                <fieldset className='form-group'>
                                    <input
                                        className='form-control form-control-lg'
                                        type="text"
                                        placeholder='文章描述'
                                        value={description || ""}
                                        onChange={this.changeDesc}
                                    />
                                </fieldset>
                                <fieldset className='form-group'>
                                    <textarea
                                        className='form-control form-control-lg'
                                        rows={12}
                                        placeholder='用markdown编辑文章'
                                        value={body || ""}
                                        onChange={this.changeBody}
                                    />
                                </fieldset>
                                
                                <button
                                    className='btn btn-primary pull-xs-right'
                                    type='button'
                                    onClick={this.onSubmitForm({ slug, title, description, body, tag, tags })}
                                >
                                    更新文章
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    componentWillUnmount() {
        // 清理仓库数据
        this.props.onUnload()
    }
}

//数据
// const mapState= state=>{
//   console.log(state.user); //细分reducer
//   return {...state.user}  // {email:'',username:'',password:''}
// }

const mapState = state => ({ ...state.article })

//行为
const mapDispatch = dispatch => {
    return {
        changeTitle: (key, value) => dispatch(action.articleFieldUpdate(key, value)),
        changeDesc: (key, value) => dispatch(action.articleFieldUpdate(key, value)),
        changeBody: (key, value) => dispatch(action.articleFieldUpdate(key, value)),
        changeTag: (key, value) => dispatch(action.articleFieldUpdate(key, value)),
        addTag: () => dispatch(action.articleAddTag()),
        removeTag: (tag) => dispatch(action.articleRemoveTag(tag)),
        upDataAtricle: (article) => dispatch(action.upDataAtricle(article)),
        onUnload: () => dispatch(action.unload()),
        getArticleBySlug: (slug) => dispatch(action.getArticleBySlug(slug))
    }
}


export default connect(mapState, mapDispatch)(ArticleEdit)